<template>
  <div class="user">
    <h1>{{msg}}</h1>
    <h1>请选择语言</h1>
    <i-select v-model="langType" style="width:100px" placeholder="语言类型" @on-change="onChange3()">
      <i-option v-for="item in langList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
    </i-select>

    <h1>返回语言是：{{lang}}</h1>
  </div>
</template>

<script>
    import {getUserList,postTest} from '../share/homeService';

    export default {
        name: 'User',
        data() {
            return {
                msg: 'Welcome to alpaak',
                user: {},
                userList: [],
                tableHeader: [
                    {title: '姓名', key: 'name', width: '260px'},
                    {title: '年龄', key: 'age', width: '260px'},
                    {title: '邮箱', key: 'email', width: '260px'},
                    {title: '角色id', key: 'roleId', width: '260px'}
                ],
                tableBody: [],
                curIndex: 1,
                total: 0,
                // pageSize: Number(pageSize(250)),
                searchValue: 'alp',
                pageSize:0,
                test: {'test':'test'},
                lang: null,
                langType: 'en_US',
                langList:[
                    {
                        value: 'zh_CN',
                        label: '中文'
                    },
                    {
                        value: 'en_US',
                        label: '英文'
                    },
                ]
            }
        },
        methods: {
            // 获得用户信息
            getUserList() {
                let data={
                    Page: {
                        current: this.curIndex,
                        size: this.pageSize
                    },
                    User: {name: this.searchValue}
                };
                console.log('发的参数是：')
                console.log(data)
                getUserList(data).then(res => {
                    console.log(res);
                    if (res.code === 1) {
                        this.total = res.data.total;
                        let arr = res.data.records;
                        arr.forEach(item => {
                            item['index'] = arr.indexOf(item) + 1;
                        });
                        this.tableBody = JSON.parse(JSON.stringify(arr));
                    } else {
                        this.$Message.warning(res.rspMsg);
                    }
                })
            },


            onChange3(){
                this.getTest()
            },

            // 获得用户信息
            getTest() {
                let data = {'test':'test'};
                let langType = this.langType;
                console.log("当前选择的是：");
                console.log(langType);
                postTest(data,langType).then(res => {
                    console.log(res);
                    if (res.status === '1') {
                        console.log("返回值是");
                        console.log(res.result.lang);
                        this.lang = res.result.lang
                    } else {
                        this.$Message.warning(res.rspMsg);
                    }
                })
            },
        },
        mounted() {
            this.getTest()
        },
        watch:{

        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1,
  h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
